<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-20 10:05:03
 * @LastEditors: charles
 * @LastEditTime: 2021-12-22 09:29:45
-->
<template>
  <div ref="map_container" style="height: 100%"></div>
</template>
<script>
import { get } from "../../../utils/request";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    // 1. 初始化
    this.initMap();
  },
  methods: {
    ...mapMutations(["SET_ED"]),
    initMap() {
      let vm = this;
      let container = this.$refs.map_container;
      // 1.初始化地图
      var map = new AMap.Map(container, {
        mapStyle: "amap://styles/519bc5be170415504fe23ba1a632d085",
        zoom: 22, //级别
        center: [103.834228, 36.060798], //中心点坐标
        viewMode: "3D", //使用3D视图
      });
      // 将map保存为一个全局变量
      this.map = map;
      // 2.行政区轮廓
      let polygons = [];
      var opts = {
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: "all", //返回行政区边界坐标组等具体信息
        level: "district", //查询行政级别为 市
      };
      let district = new AMap.DistrictSearch(opts);
      district.setExtensions("all");
      district.search("柳州", function (status, result) {
        map.remove(polygons); //清除上次结果
        polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 5,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
        map.setFitView(polygons); //视口自适应
      });
      // 3. 打点 查找到所有的工程设备
      let url = "/dashboard/findEngineerDeviceTree";
      get(url).then((resp) => {
        console.log();
        let eds = resp.data;
        // 所有设备
        let devices = [];
        eds.forEach((item) => {
          // 缓存工程，将工程绑定到

          devices.push(...item.children);
        });
        // 将设备转换为点位
        // console.log(devices, "devices");
        if (devices.length > 0) {
          let defaultDevice = devices[0];
          let ed = {
            engineer_id: defaultDevice.engineer_id,
            device_id: defaultDevice.id,
          };
          this.SET_ED(ed);
        }

        // 创建 AMap.Icon 实例：设备在线
        var icon = new AMap.Icon({
          // size: new AMap.Size(30, 30),    // 图标尺寸
          image: require("./icons/box_title_icon.png"), // Icon的图像
          // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(25, 25), // 根据所设置的大小拉伸或压缩图片
        });
        // 创建 AMap.Icon 实例：设备离线
        var iconOutline = new AMap.Icon({
          // size: new AMap.Size(30, 30),    // 图标尺寸
          image: require("./icons/box_title_icon_outline.png"), // Icon的图像
          // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(25, 25), // 根据所设置的大小拉伸或压缩图片
        });
        // 1. 创建点
        var cluster,
          markers = [];
        // 点聚合
        for (var i = 0; i < devices.length; i += 1) {
          var marker = new AMap.Marker({
            id: devices[i].id,
            videoUrl: devices[i].video,
            title: devices[i].name,
            position: devices[i].position,
            icon: devices[i].online_status == 1 ? icon : iconOutline, // 添加 Icon 为上面创建的icon实例
          });
          markers.push(marker);
        }
        addCluster();
        function addCluster(tag) {
          if (cluster) {
            cluster.setMap(null);
          }
          // 聚合点的样式
          var sts = [
            {
              url: require("./icons/red_32.png"),
              size: new AMap.Size(32, 32),
              offset: new AMap.Pixel(-18, -18),
            },
            {
              url: require("./icons/green_32.png"),
              size: new AMap.Size(32, 32),
              offset: new AMap.Pixel(-16, -16),
            },
            {
              url: require("./icons/orange_36.png"),
              size: new AMap.Size(36, 36),
              offset: new AMap.Pixel(-18, -18),
            },
            {
              url: require("./icons/red_48.png"),
              size: new AMap.Size(48, 48),
              offset: new AMap.Pixel(-24, -24),
            },
            {
              url: require("./icons/darkRed_48.png"),
              size: new AMap.Size(48, 48),
              offset: new AMap.Pixel(-24, -24),
            },
          ];
          map.plugin(["AMap.MarkerClusterer"], function () {
            cluster = new AMap.MarkerClusterer(map, markers, {
              styles: sts,
              gridSize: 80,
            });
          });
        }
        // 2. 为点绑定事件
        marker.on("click", function () {
          // console.log(this.getExtData(), "this.getExtData()");
          let device_id = this.getExtData().id;
          let engineer_id = this.getExtData().engineer_id;
          // 将当前设备设置到状态机中
          let ed = {
            device_id,
            engineer_id,
          };
          vm.SET_ED(ed);
        });
        // 3. 确认打点
        map.add(marker);
      });
    },
  },
};
</script>
